<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据及示例</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <link rel="stylesheet" href="https://g.alicdn.com/??tbhome/taobao-2021/0.0.25/lib/style/page-min.css,tbhome/taobao-2021/0.0.25/lib/style/index-min.css">
    <style>
        tr{
            text-align: center;
        }
        table,th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="app">
    <i aria-hidden="true" class="tb-ifont service-arrow" data-spm-anchor-id="a21bo.jianhua/evo255811b326289.201867.i1.5af911d9E5XfXV"></i>
    <span class="tb-ifont mytao-icon"></span>
<table>
    <caption>商品信息</caption>
    <tr>
        <th>商品名-title</th>
        <th>商品主图-mainPic</th>
        <th>商品原价-originalPrice</th>
        <th>商品现价-actualPrice</th>
        <th>店铺名-shopName</th>
        <th>店铺logo-shopLogo</th>
        <th>商品销量-monthSales</th>
    </tr>
    <tr v-for="info in phone_infos">
        <td>{{info.title}}</td>
        <td><img :src="info.mainPic" alt="" width="120px"></td>
        <td>{{info.originalPrice}}</td>
        <td>{{info.actualPrice}}</td>
        <td>{{info.shopName}}</td>
        <td><img :src="info.shopLogo" alt="" width="50px"></td>
        <td>{{info.monthSales}}</td>
    </tr>
</table>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<!--引入数据集-->
<script src="js/data.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                // 商品数据100条，数据量过多，按需取用
                infos: info_data,
                // 搜索手机商品数据100条,(无店铺logo)
                phone_infos:phone_info_data
            }
           }
    })
</script>
</html>